<template>
   <div>
     <avue-form @tab-click="handleTabClick"
                :option="option"
                v-model="form"
                @submit="handleSubmit">
     </avue-form>
   </div>
</template>

<script>
export default {
  name: 'editReplace',
  data () {
    return {
      tabs: true,
      form: {
        text: '文本',
        text1: '文本1',
        text2: '文本2',
        text3: '文本3'
      }
    }
  },
  computed: {
    option () {
      return {
        tabs: this.tabs,
        tabsActive: 1,
        group: [
          {
            /* icon: 'el-icon-info', */
            label: '批量替换',
            prop: 'group1',
            labelWidth: 120,
            column: [{
              label: '操作字段',
              prop: 'text1',
              span: 24,
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              dicData: [],
              rules: [
                {
                  required: true,
                  message: '请选择',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '替换内容',
              prop: 'text1',
              span: 24,
              rules: [
                {
                  required: true,
                  message: '请输入',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '替换后的内容',
              prop: 'text1',
              span: 24,
              rules: [
                {
                  required: true,
                  message: '请输入',
                  trigger: 'blur'
                }
              ]
            }]
          }, {
            /* icon: 'el-icon-info', */
            label: '批量修改',
            prop: 'group2',
            labelWidth: 120,
            column: [{
              label: '操作字段',
              prop: 'text2',
              span: 24,
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              dicData: [],
              rules: [
                {
                  required: true,
                  message: '请选择',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '替换内容',
              prop: 'text3',
              span: 24,
              rules: [
                {
                  required: true,
                  message: '请输入',
                  trigger: 'blur'
                }
              ]
            }]
          }
        ]
      }
    }
  },
  created () {
    this.option1 = Object.assign(this.deepClone(this.option), {
      card: true
    })
  },
  methods: {
    handleSubmit (form, done) {
      // this.$message.success(JSON.stringify(this.form))
      setTimeout(() => {
        done()
      }, 2000)
    },
    handleTabClick (tabs, event) {
      // this.$message.success('序号为:' + tabs.index)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
